import 'package:flutter/material.dart';
import 'package:hotpot/widgets/widget_ext.dart';

import '../z_container.dart';

class FunctionKeyboard extends StatefulWidget {

  final GestureTapCallback? onInsert;
  final GestureTapCallback? onSend;
  final ValueChanged<String>? onAdd;

  const FunctionKeyboard({super.key, this.onInsert, this.onAdd, this.onSend});

  @override
  State<FunctionKeyboard> createState() => _FunctionKeyboardState();
}

class _FunctionKeyboardState extends State<FunctionKeyboard> {
  String inputText = '';
  String? selectKey;

  @override
  Widget build(BuildContext context) {
    return ZContainer(
      color: const Color(0xFFF7F7F7),
      child: Row(
        children: [
          _numKey(),
          _funcKey(),
        ],
      ),
    );
  }

  void onHighlightChanged(bool value, String key) {
    setState(() {
      if (value) {
        selectKey = key;
      } else {
        selectKey = null;
      }
    });
  }

  _numKey() {
    item(String key) {
      return ZContainer(
        width: 85,
        height: 50,
        alignment: Alignment.center,
        radius: 6,
        margin: const EdgeInsets.symmetric(horizontal: 3, vertical: 5),
        color: selectKey == key ? const Color(0xFFCFDEF5) : Colors.white,
        child: key.text(size: 20, bold: true, color: selectKey == key ? const Color(0xFF0777FF) : Colors.black),
      ).inkWell(
        radius: 6,
        onHighlightChanged: (value) => onHighlightChanged(value, key),
        onTap: () => inputText += key,
      );
    }

    return Column(
      children: [
        Row(
          children: [
            item('1').expanded(),
            item('2').expanded(),
            item('3').expanded(),
          ],
        ),
        Row(
          children: [
            item('4').expanded(),
            item('5').expanded(),
            item('6').expanded(),
          ],
        ),
        Row(
          children: [
            item('7').expanded(),
            item('8').expanded(),
            item('9').expanded(),
          ],
        ),
        Row(
          children: [
            item('0').expanded(),
          ],
        ),
      ],
    ).expanded(flex: 3);
  }

  _funcKey() {
    item(Widget child, String key, {Color color = Colors.white, double height = 50, GestureTapCallback? onTap}) {
      return ZContainer(
        width: 85,
        height: height,
        alignment: Alignment.center,
        radius: 6,
        margin: const EdgeInsets.symmetric(horizontal: 3, vertical: 5),
        color: selectKey == key ? const Color(0xFFCFDEF5) : color,
        child: child,
      ).inkWell(
        radius: 6,
        onHighlightChanged: (value) => onHighlightChanged(value, key),
        onTap: onTap,
      );
    }

    return Column(
      children: [
        item('images/img_add_goods.png'.assetImage(width: 27), 'add', onTap: widget.onInsert),
        item('images/img_order_send.png'.assetImage(width: 28), 'send', onTap: widget.onSend),
        item('OK'.text(size: 20, bold: true, color: Colors.white), 'ok',
            height: 110, color: const Color(0xFF0D6EFD), onTap: () {
              widget.onAdd?.call(inputText);
              inputText = '';
            }),
      ],
    ).expanded();
  }
}
